<template>
  <div class="zong">
    <div class="tou">
      <el-page-header title="" @back="goBack" content="我的钱包">
      </el-page-header>
    </div>
    <div>
      <div class="zhong">
        <div class="kuang">
          <div class="list">
            <div class="zuo">我的余额</div>
            <div class="you">{{ yue }}</div>
          </div>
        </div>
      </div>
      <div class="chongzhi">
        <div class="kuang">
          <div class="title">充值</div>
          <div class="xuanze">
            <div class="shang">
              <el-row>
                <el-button @click="dj_fn(10)">充 10元</el-button>
                <el-button @click="dj_fn(20)">充 20 元</el-button>
                <el-button @click="dj_fn(30)">充 30 元</el-button>
              </el-row>
            </div>
            <div class="xia">
              <el-row>
                <el-button @click="dj_fn(50)">充 50元</el-button>
                <el-button @click="dj_fn(100)">充100元</el-button>
                <el-button @click="dj_fn(200)">充200元</el-button>
              </el-row>
            </div>
            <div class="zhifu">
              <el-row>
                <el-button type="primary" @click="cz_fn"> 去充值 </el-button>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      yue: "0",
      i: "",
    };
  },
  methods: {
    goBack() {
      this.$router.push("/wode");
    },
    dj_fn(i) {
      this.i = i;
      console.log(i);
    },
    cz_fn() {
      this.$message({
          showClose: true,
          message: '充值成功',
          type: 'success'
        });
      this.yue = this.yue - 0 + (this.i - 0);
      this.axios({
        method: "post",
        url: "http://localhost:3000/yue",
        data: {
          yue: this.yue,
        },
      })
        .then((res) => {
          // this.data = res.data.data;
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  mounted() {
    this.axios({
      method: "post",
      url: "http://localhost:3000/my_yue",
    })
      .then((res) => {
        this.data = res.data.data;
        this.yue = this.data[0].yue;
        console.log(this.data[0].yue);
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>
<style scoped>
.tou {
  height: 40px;
  background-color: rgb(196, 199, 202);
  padding-top: 20px;
  font-size: 16px;
  position: relative;
}
.zhong {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.kuang {
  padding-top: 10px;
  width: 95%;
  /* height: 200px; */
  border-radius: 5px 5px;
  background-color: rgb(236, 238, 236);
}
.list {
  display: flex;
  height: 70px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.zuo {
  flex: 1;
  color: red;
  font-size: 20px;
}
.you {
  color: rgb(158, 58, 58);
  flex: 1;
  font-size: 40px;
}

.chongzhi {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.title {
  font-size: 20px;
  color: brown;
}
.xuanze {
  border: 1px solid gray;
  height: 200px;
  display: flex;
  flex-direction: column;
}
.shang {
  padding-top: 20px;
  padding-left: 35px;
  flex: 2;
}
.xia {
  padding-top: 20px;
  padding-left: 35px;
  flex: 2;
}
.zhifu {
  flex: 1;
  padding-left: 150px;
}
</style>


